<template>
  <div class="box">
    <Header />
    <div class="content">
      <div class="search">
        <el-input
          v-model="search"
          style="width:600px;height:50px"
          placeholder="搜索任务"
          prefix-icon="el-icon-search"
        ></el-input>
        <div class="btn">
          <img
            src="../../assets/search.png"
            alt
            style="width:90px;height:40px; cursor: pointer;margin-right:10px"
            @click="handleSearch"
          />
          <el-button size="large" type="primary" @click="fetchTasks();flag=false">重置</el-button>
          <!-- <img
            src="../../assets/money.png"
            alt
            style="width:90px;height:35px; cursor: pointer;"
            @click="goToTask"
          /> -->
          <!-- <el-button size="large" type="primary" @click="handleSearch">查看任务</el-button>
          <el-button size="large" type="primary" @click="fetchTasks();flag=false">重置</el-button> -->
        </div>
      </div>
      <div class="info">
        <LeftSidebar />
        <div class="searchInfo">
          <div class="tile">任务列表:</div>
          <div class="card">
            <ul v-if="!flag">
              <li
                v-for="task in taskList"
                :key="task.id"
                class="task-item"
                @click="goToTaskDetail(task)"
              >
                <div class="task-card">
                  <div class="task-header">
                    <span class="task-url">{{ task.cUrl }}</span>
                  </div>
                  <div class="task-body">
                    <div>
                      奖励金额:
                      <strong>{{ task.rewardAmount }}</strong>
                    </div>
                    <div>
                      热度:
                      <strong>{{ task.heat }}</strong>
                      <span @click.stop="hot(task)">👍</span>
                    </div>
                    <div>
                      状态:
                      <strong>{{ task.claimStatus === 1 ? '已认领' : '待认领' }}</strong>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
            <ul v-if="flag">
              <li
                v-for="task in searchList"
                :key="task.id"
                class="task-item"
                @click="goToTaskDetail(task)"
              >
                <div class="task-card">
                  <div class="task-header">
                    <span class="task-url">{{ task.cUrl }}</span>
                  </div>
                  <div class="task-body">
                    <div>
                      奖励金额:
                      <strong>{{ task.rewardAmount }}</strong>
                    </div>
                    <div>
                      热度:
                      <strong>{{ task.heat }}</strong>
                      <span @click.stop="hot(task)">👍</span>
                    </div>
                    <div>
                      状态:
                      <strong>{{ task.claimStatus === 1 ? '已认领' : '待认领' }}</strong>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
            <div v-if="loading" class="loading">加载中...</div>
            <div v-if="taskList.length === 0" class="empty-state">没有找到任务</div>
          </div>
          <div class="fbTask">
            <el-button v-if="searchList.length === 0" type="primary" @click="goOpen">发布任务</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script lang="ts" setup>
import { TaskApi } from '../../api/task.ts'
import { onMounted, ref } from 'vue'
import LeftSidebar from '../components/LeftSidebar.vue'
import { Task } from '../../types/entity.ts'
import router from '../../router'
import Header from '../components/header.vue'
import { ElMessage } from 'element-plus'
import { userApi } from '@/api/user'


let search = ref('')
let taskList = ref<Task[]>([])
let loading = ref(false)
let searchList = ref([])
let flag = ref(false)
onMounted(() => {
  search.value = router.currentRoute.value.query.name
})
const fetchTasks = async () => {
  loading.value = true
  try {
    const response = await TaskApi.taskList()
    taskList.value = response.data
    console.log(taskList.value, '任务列表')
  } catch (error) {
    console.error('获取任务列表失败:', error)
  } finally {
    loading.value = false
  }
}
const goToTaskDetail = (task: any) => {
  if (task.claimStatus === 1) {
    ElMessage.success('该任务已认领')
  } else {
    router.push({ name: 'taskDetail', query: { id: task.id } })
  }
  //
}
const goOpen = () => {
  router.push({ path: '/openTask' ,query:{name:search.value}})
}
const handleSearch = () => {
  console.log('搜索:', search.value)
  flag.value = true
  searchList.value = taskList.value.filter(item => item.cUrl == search.value)
  // 执行搜索逻辑
}

const handleReward = () => {
  router.push({ name: 'task' })
}
const hot =async(info)=>{
  let res = await userApi.heat(info.id)
  if(res.meta.code == 2000){
    fetchTasks()
    if(flag.value){
      handleSearch()
    }
  }
console.log(res,'asdd');

}
onMounted(() => {
  fetchTasks()
})
</script>
  
  <style lang="less" scoped>
  .btn{
    display: flex;
    align-items: center;
  }
.fbTask {
  display: flex;
  margin-top: 20px;
  justify-content: flex-end;
}
.box {
  width: 100%;
  height: 100%;
  .content {
    width: 80%;
    min-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    .search {
      width: 800px;
      margin: 0 auto;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      margin-bottom: 20px;
    }
    .info {
      width: 100%;
      min-height: 600px;
      background: #f9f9f9;
      border-radius: 8px;
      // padding: 20px;
      display: flex;
      justify-content: space-between;
      .list {
        width: 15%;
        min-height: 600px;
        background: #e5f2f5;
        border-radius: 20px;
        padding: 20px;
        ul {
          padding: 0;
          background: #a5c9ed;
          min-height: 500px;
          border-radius: 10px;
          li {
            list-style: none;
            line-height: 30px;
            padding: 0 20px;
          }
        }
      }
      .searchInfo {
        width: 80%;
        min-height: 600px;
      padding: 20px;

        .tile {
          font-size: 24px;
          margin-bottom: 20px;
          font-weight: bold;
        }
        .card {
          background: #fff;
          border-radius: 8px;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
          padding: 20px;
          height: 400px;
          overflow-y: scroll;
          ul {
            padding: 0;
            list-style: none;
            margin: 0;
          }
          .task-item {
            padding: 15px;
            margin-bottom: 20px;
            background: #f0f0f0;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s;
            &:hover {
              background-color: #e8e8e8;
            }
          }
          .task-card {
            .task-header {
              font-size: 18px;
              font-weight: bold;
              color: #007bff;
              margin-bottom: 10px;
            }
            .task-body {
              font-size: 14px;
              color: #333;
              div {
                margin: 5px 0;
              }
              strong {
                font-weight: bold;
              }
            }
          }
        }
        .empty-state {
          text-align: center;
          font-size: 18px;
          color: #aaa;
        }
        .loading {
          text-align: center;
          font-size: 18px;
          color: #007bff;
        }
      }
    }
  }
}
</style>
  